<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table ref="dataTableRef" v-loading="loading" :data="list" highlight-current-row stripe>
        <el-table-column :label="t('mock.instanceId')" prop="instanceId" />
        <el-table-column :label="$t('mock.instanceAssignTopics')" prop="instanceAssignTopics">
          <template #default="scope">
            <el-link type="primary" @click="showTopics(scope.row.instanceId)">
              {{ scope.row.instanceAssignTopics }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('mock.instanceReportDate')"
          prop="instanceReportDate"
          width="180"
        >
          <template #default="scope">
            {{ dayjs.unix(scope.row.instanceReportDate).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      v-model="topicListDialogVisible"
      :title="t('mock.instanceAssignTopics')"
      @close="clearAssignTopics"
    >
      <el-scrollbar v-loading="loading" :data="assignTopics" height="300px">
        <p v-for="(item, index) in assignTopics" :key="index" class="scrollbar-demo-item">
          {{ item.replaceAll('"', "") }}
        </p>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import dayjs from "dayjs";
defineOptions({
  name: "Customer",
  inheritAttrs: false,
});

const { t } = useI18n();

import MockAPI, { IPageVO } from "@/api/mock";
const loading = ref(false);

const list = reactive<IPageVO[]>([]);
const assignTopics = reactive<string[]>([]);
const topicListDialogVisible = ref(false);

function handleQuery() {
  loading.value = true;
  MockAPI.getInstanceList()
    .then((data) => {
      Object.assign(list, data);
    })
    .finally(() => {
      loading.value = false;
    });
}

function showTopics(instanceId: string) {
  loading.value = true;
  MockAPI.getTopicsByInstanceId(instanceId)
    .then((data) => {
      Object.assign(assignTopics, data);
      topicListDialogVisible.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
}

function clearAssignTopics() {
  topicListDialogVisible.value = false;
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.scrollbar-demo-item {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
</style>
